<template>
    <section class="projects-sidebar">
        <section class="projects-sidebar__section">
            <section class="projects-sidebar__category-list-wrapper">
                <div class="projects-sidebar__category is-active">
                    全部
                </div>
                <div v-for="category in categories" class="projects-sidebar__category">
                    <el-tag class="demandItem" v-for="category2 in category.categories" @click="searchDemand(category2)">
                        {{category2.categoryName}}
                    </el-tag>
                </div>
            </section>
        </section>
    </section>
</template>

<script setup>
  import {selectCategories} from "@/assets/api/categoryApi";
  import {useRouter} from "vue-router";
  import {onBeforeMount} from "vue";

  const router = useRouter();
  const categories = ref([
    {
      categoryName: '',
      categories: {categoryName: ''}
    }
  ]);
  const showCategories = () => {
    let data = {};
    selectCategories(data).then((res) => {
      categories.value = res.data;
    })
  };
  const searchDemand = (category) => {
    router.push({path: '/demandCategory', query: {tag: category.categoryName}});
  };

  // watch:{
  //     $route(to,from){
  //         location.reload();
  //     }
  // },
  onBeforeMount(() => {
    showCategories();
  });

</script>

<style scoped>
    .projects-sidebar {
        box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
        display: flex;
        border-radius: 4px;
        background: #ffffff;
        flex-direction: column;
        padding: 0 20px 10px 20px;
        flex: 0 0 240px;
        margin-right: 24px;
        width: 300px;
    }
    .projects-sidebar__section {
        padding: 20px 0;
    }
    .projects-sidebar__category-list-wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    .projects-sidebar__category {
        margin-top: 20px;
        margin-right: 15px;
        font-size: 14px;
        color: #4a4a4a;
        transition: .5s;
        cursor: pointer;
    }
    .demandItem {
        color: #222222;
        padding: 0px 10px;
        font-size: 12px;
        border: 1px solid #adb3fb;
        border-radius: 40px;
        margin: 5px 5px 5px 5px;
        transition: .5s;
        cursor: pointer;
    }
</style>
